<template>
  <div class="security-check-table-wrapper" :style="{ height: tableWrapperHeight }">
    <a-table
      :data-source="tableData"
      :columns="columns"
      :id="'table' + id"
      :row-key="rowKey"
      :row-selection="withSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
      :rowClassName="rowClassName"
      bordered
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
      :scroll="{ y: 550 }"
    >
      <template v-if="withOperateColumn" slot="operation" slot-scope="text, record">
        <div class="column-operate">
          <span class="cell-operate-edit" @click="editRow(record)">修改</span>
          <span class="cell-operate-delete" @click="deleteRow(record)">删除</span>
        </div>
      </template>
    </a-table>
    <template>
      <!-- <a-table
        class="footerTable"
        :columns="tableCols"
        bordered
        :data-source="footerDate"
        :rowClassName="rowClassName"
        :pagination="pagination"
      ></a-table> -->
      <a-table
        :data-source="footerDate"
        :columns="columns"
        class="footerTable"
        :row-key="rowKey"
        min-height="600px"
        :row-selection="withSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
        :rowClassName="rowClassName"
        bordered
        :pagination="false"
        @change="handleTableChange"
        :loading="loading"
        :scroll="{ y: 600 }"
      >
        <template v-if="withOperateColumn" slot="operation" slot-scope="text, record">
          <div class="column-operate">
            <span class="cell-operate-edit" @click="editRow(record)">修改</span>
            <span class="cell-operate-delete" @click="deleteRow(record)">删除</span>
          </div>
        </template>
      </a-table>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SecurityCheckTable',
  props: {
    height: {
      type: [Number, String],
      default: '50vh',
    },
    tableCols: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    rowKey: {
      type: String,
      default: 'key',
    },
    withSelection: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Boolean,
      default: false,
    },
    footerDate: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
      default: '10',
    },
  },
  data() {
    return {
      selectedRowKeys: [],
      columnfot: [],
    }
  },
  computed: {
    columns() {
      function setClickHandler(columns) {
        return columns.map((col) => {
          if (col.clickHandler) {
            col.customCell = (row, rowIndex) => {
              return {
                class: 'cell-click',
                on: {
                  click: () => {
                    col.clickHandler(row, rowIndex)
                  },
                },
              }
            }
          }
          if (col.children) {
            setClickHandler(col.children)
          }
          return col
        })
      }
      return setClickHandler(this.tableCols)
    },
    tableWrapperHeight() {
      return typeof this.height === 'number' ? this.height + 'px' : this.height
    },
    withOperateColumn() {
      return this.columns.find((col) => col.dataIndex === 'operation')
    },
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log(selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    rowClassName(index) {
      if (index.index % 2 == 0) {
        return 'warning-row'
      } else {
        return 'warning-rows'
      }
    },
    editRow(row) {
      // console.log("edit");
    },
    deleteRow(row) {
      // console.log("delete");
    },
    clickHandler(index) {
      // console.log(index);
    },
    handleTableChange(pagination, filters, sorter) {
      this.$emit('handleTableChange', pagination)
    },
  },
}
</script>

<style lang="scss" scoped>
.security-check-table-wrapper {
  width: 100%;
  background: #fff;
  .footerTable {
    position: relative;
    top: -30px;
  }
  ::v-deep .footerTable .ant-table-thead {
    display: none;
    .ant-table-wrapper {
      margin-bottom: 0 !important;
    }
  }
  ::v-deep .footerTable .ant-table-tbody .ant-table-row {
    background-color: #fff;
    padding: 9px 16px;
  }
  ::v-deep .footerTable {
    .ant-table {
      width: 100%;
      .ant-table-thead {
        th {
          padding: 10px 12px;
        }
        .ant-table-column-title {
          font-size: 14px;
          font-family: Helvetica, 'Microsoft YaHei';
          color: #101116;
          font-weight: bold;
        }
      }
      .ant-table-tbody {
        .warning-row {
          background-color: #f3f5f8;
          padding: 9px 16px;
        }
        .warning-rows {
          background-color: #fff;
          padding: 9px 16px;
        }
        td {
          font-size: 14px;
          font-family: Helvetica, 'Microsoft YaHei';
          color: #101116;
          &.cell-click {
            color: #2d67e3;
            cursor: pointer;
          }
        }
        .column-operate {
          span {
            cursor: pointer;
            &:not(:last-child) {
              margin-right: 25px;
            }
            &.cell-operate-edit {
              color: #2d67e3;
            }
            &.cell-operate-delete {
              color: #ea4545;
            }
          }
        }
      }
    }
  }
  ::v-deep .ant-table {
    width: 100%;
    .ant-table-placeholder {
      min-height: 550px;
    }
    .ant-table-tbody {
      min-height: 500px !important;
    }
    .ant-table-thead {
      th {
        padding: 10px 12px;
      }
      .ant-table-column-title {
        font-size: 14px;
        font-family: Helvetica, 'Microsoft YaHei';
        color: #101116;
        font-weight: bold;
      }
    }
    .ant-table-tbody {
      .warning-row {
        background-color: #f3f5f8;
        padding: 9px 16px;
      }
      .warning-rows {
        background-color: #fff;
        padding: 9px 16px;
      }
      td {
        font-size: 14px;
        font-family: Helvetica, 'Microsoft YaHei';
        color: #101116;
        &.cell-click {
          color: #2d67e3;
          cursor: pointer;
        }
      }
      .column-operate {
        span {
          cursor: pointer;
          &:not(:last-child) {
            margin-right: 25px;
          }
          &.cell-operate-edit {
            color: #2d67e3;
          }
          &.cell-operate-delete {
            color: #ea4545;
          }
        }
      }
    }
  }
}
</style>
